<template>
  <div>
    <DetailPanel :dataSource="detailData" :columns="detailColumns" />
    <TableSearch
      ref="tableSearch"
      :columns="tableColumns"
      :tableData="tableData"
      @handleTableData="handleTableData"
    />
  </div>
</template>
<script>
import DetailPanel from '@/components/DetailPanel'
import TableSearch from '@/components/TableSearch'
import { queryTimecardDetail } from '@/api/timeCard'
import formatter from '@/utils/format'

export default {
  name: 'TimeCardDetail',
  components: { DetailPanel, TableSearch },
  data() {
    return {
      detailData: {},
      detailColumns: [
        {
          label: '时长卡券码',
          value: 'integralId',
        },
        {
          label: '绑定电站',
          value: 'stationName',
        },
        {
          label: '包含时长',
          value: 'initialTime',
        },
        {
          label: '剩余时长',
          value: 'restTime',
        },
        {
          label: '所属代理商',
          value: 'merchantName',
        },
        {
          label: '可兑换区域',
          value: 'nationName',
        },
        {
          label: '状态',
          value: 'status',
          formatter: (data) => formatter('timeCardStatus', data.status),
        },
      ],
      tableData: {},
      tableColumns: [
        {
          label: '订单号',
          prop: 'consumeBillNum',
          resourceId:
            '/web/timecard-management/timecard/timecard-detail/订单号',
        },
        {
          label: '订单时间',
          prop: 'createTime',
          formatter,
          resourceId:
            '/web/timecard-management/timecard/timecard-detail/订单时间',
        },
        {
          label: '消费时长',
          prop: 'chargeDuration',
          resourceId:
            '/web/timecard-management/timecard/timecard-detail/消费时长',
        },
      ],
    }
  },
  // created() {
  //   queryTimecardDetail({
  //     integralId: this.$route.params.integralId,
  //   }).then((res) => {
  //     this.detailData = res
  //   })
  // },
  methods: {
    handleTableData(params) {
      params.integralId = this.$route.params.integralId
      queryTimecardDetail(params).then((res) => {
        this.detailData = res
        this.tableData = {
          list: this.detailData.timecardLogVos.list,
          totalCount: this.detailData.timecardLogVos.totalAmount,
        }
      })
      // this.tableData = {
      //   list: this.detailData.timecardLogVos,
      //   totalCount: 0,
      // }
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-wrapper {
  margin-bottom: 16px;
}
</style>
